<template>
  <ul>
    <li
      v-for="(item, index) in list"
      :class="value === index ? 'active' : ''"
      :key="item"
      @click="handleClick(index)"
    >
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  props: ['list', 'value'],
  data() {
    return {}
  },
  methods: {
    handleClick(index) {
      this.$emit('input', index)
    },
  },
}
</script>

<style>
.active {
  background: red;
  color: gold;
}
</style>
